<template>
	<tui-list-cell :hover="false" :arrow="true">
		<view class="tui-line-cell">
			<view class="tui-title">
				<text v-show="rules_&&rules_[0]&&rules_[0].required" class="isrequire">*</text>
				<text>{{label}}</text>
			</view>
			<view class="tui-box tui-right">
				<picker mode="time" :value="time" start="00:00" end="23:59" @change="bindTimeChange">
					<view class="tui-input-picker">{{time}}</view>
				</picker>
			</view>
		</view>
	</tui-list-cell>
</template>

<script>
	export default {
		name: "kmlc-form-time",
		props: {
			label: {
				type: String
			},
			emData: {
				type: Object,
				default: () => {
					return {}
				}
			},
			options: {
				type: Object,
				default: () => {
					return {}
				}
			},
			rules: {
				type: Array,
				default: () => {
					return []
				}
			},
			model: {
				type: String,
			},
			keyStr: {
				type: String,
			}
		},
		data() {
			return {
				time: '',
				value: '',
				options_: {},
				rules_: [],
				model_: '',
				key_: ''
			};
		},
		created() {
			// 为数据渲染
			if (this.emData && this.emData.options) {
				this.options_ = this.emData.options;
				this.rules_ = this.emData.rules;
			} else { // 一般组件使用
				this.options_ = this.options;
				this.rules_ = this.rules;
				this.model_ = this.model;
				this.key_ = this.keyStr;
			}
			this.time = this.emData.time;
			this.array = this.options_.options;
			this.value = this.options_.defaultValue;
		},
		watch: {
			'emData.options.defaultValue':function(val){
			  console.log('watch data-defaultValue:',val);
			  this.time =val.value||'请选择';
			}
		},
		methods: {
			bindTimeChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.time = e.target.value
				
				this.$emit('onChangeVal',{value:this.time});
			}
		},
		modal:{
		  prop: 'value',
		  event: 'onChangeVal'
		}
	};
</script>

<style lang="scss">
	.isrequire{
		color: red;
	}
	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.tui-title {
		min-width: 100upx;
		line-height: 32rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}
	
	.tui-box {
		flex: 1;
	}
	
	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
	}
	
	.tui-input-picker {
		height: 32rpx;
		line-height: 32rpx;
		font-size: 28upx;
		background: #FFF;
		flex: 1;
	}
	
	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}
</style>
